<template>
  <view>
    <cutomsNav />
    <!-- 轮播器 -->
      <view class="u-demo-block">
        <u-swiper
                :list="list6"
                @change="e => currentNum = e.current"
                :autoplay="false"
                indicatorStyle="right: 20px"
        >
            <view
                    slot="indicator"
                    class="indicator-num"
            >
                <text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
            </view>
        </u-swiper>
    </view>
    <view v-for="item in 100" :key="item">1</view>
  </view>
</template>

<script>
    import cutomsNav from './components/cutoms-nav'
    export default {
        components:{
            cutomsNav
        },
        data() {
            return {
                list6: [
                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                ],
                currentNum:''
            }
        }
    }
</script>

<style lang="scss">
    .indicator {
        @include flex(row);
        justify-content: center;

        &__dot {
             height: 6px;
             width: 6px;
             border-radius: 100px;
             background-color: rgba(255, 255, 255, 0.35);
             margin: 0 5px;
             transition: background-color 0.3s;
    
            &--active {
                 background-color: #ffffff;
             }
        }
    }

    .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
             color: #FFFFFF;
             font-size: 12px;
         }
    }
</style>